const CracoLessPlugin = require('craco-less')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const {BundleAnalyzerPlugin} = require("webpack-bundle-analyzer");
const path = require('path')
const apiMocker = require('mocker-api')

const pathResolve = pathUrl => path.join(__dirname, pathUrl)
const modifyVars = {
    '@primary-color': '#EF5D5E',
    '@link-color': '#EF5D5E',
    '@border-color-base': '#D7DAE2'
}
const customPlugins = [];

if (process.env.BUNDLE_ANALYZER) {
    // 打包分析
    customPlugins.push(new BundleAnalyzerPlugin({analyzerMode: 'static'}))
}
if (process.env.GENERATE_SOURCEMAP == false) {
    customPlugins.push(new UglifyJsPlugin({
        uglifyOptions: {
            compress: {
                drop_debugger: true,
                drop_console: true,
            },
        },
        sourceMap: false,
        parallel: true,
    }))
}
module.exports = {
    webpack: {
        alias: {
            '@@': pathResolve('.'),
            '@': pathResolve('src'),
            '@assets': pathResolve('src/assets'),
            '@common': pathResolve('src/common'),
            '@components': pathResolve('src/components'),
            '@hooks': pathResolve('src/hooks'),
            '@pages': pathResolve('src/pages'),
            '@store': pathResolve('src/store'),
            '@utils': pathResolve('src/utils')
            // 此处是一个示例，实际可根据各自需求配置
        },
        plugins: [...customPlugins]
    },
    devServer: {
        before(app) {
            // 开启mock-api支持
            apiMocker(app, path.resolve('./mock/index.js'), {})
        }
    },
    babel: {
        plugins: [
            ['import', {libraryName: 'antd', style: true}],
            ['@babel/plugin-proposal-decorators', {legacy: true}]
        ]
    },
    plugins: [
        // 开启less模块化支持. xx.module.less风格的文件全部按照模块化解析
        {
            plugin: CracoLessPlugin,
            options: {
                // 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: modifyVars,
                        javascriptEnabled: true
                    }
                },
                modifyLessRule: function () {
                    return {
                        test: /\.module\.less$/,
                        exclude: /node_modules/,
                        use: [
                            {loader: 'style-loader'},
                            {
                                loader: 'css-loader',
                                options: {
                                    modules: {
                                        localIdentName: '[local]_[hash:base64:6]',
                                    },
                                },
                            },
                            {loader: 'less-loader'},
                        ],
                    };
                },
            }
        },
        // 开启less文件解析支持. xxx.less的文件会按照非模块化方式解析
        {
            plugin: CracoLessPlugin,
            options: {
                // 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: modifyVars,
                        javascriptEnabled: true
                    }
                }
            }
        }
    ]
}
